<template>
  <div class="gridBox">
    <el-card class="cardBox">
      <div class="headerTitle">
        <div>用能分析报告</div>
        <div>
          <el-date-picker
            :disabled-date="disabledDate"
            v-model="pickerTime"
            end-placeholder="结束时间"
            range-separator="至"
            start-placeholder="开始时间"
            type="datetimerange"
          />
        </div>
      </div>
      <div class="inputs">
        <el-input v-model="energyUse" class="analysisScroll" type="textarea" />
      </div>
      <div class="configBtn">
        <button>预 览</button>
        <button @click="exportReport">下 载</button>
        <button>打 印</button>
      </div>
    </el-card>

    <el-card class="cardBox">
      <div class="headerTitle">
        <div>运维风险评估报告</div>
        <div>
          <el-date-picker
            :disabled-date="disabledDate"
            v-model="pickerTime"
            end-placeholder="结束时间"
            range-separator="至"
            start-placeholder="开始时间"
            type="datetimerange"
          />
        </div>
      </div>
      <div class="inputs">
        <el-input v-model="operation" class="analysisScroll" type="textarea" />
      </div>
      <div class="configBtn">
        <button>预 览</button>
        <button @click="exportReport">下 载</button>
        <button>打 印</button>
      </div>
    </el-card>

    <el-card class="cardBox">
      <div class="headerTitle">
        <div>舒适性分析报告</div>
        <div>
          <el-date-picker
            :disabled-date="disabledDate"
            v-model="pickerTime"
            end-placeholder="结束时间"
            range-separator="至"
            start-placeholder="开始时间"
            type="datetimerange"
          />
        </div>
      </div>
      <div class="inputs">
        <el-input
          v-model="comfortable"
          class="analysisScroll"
          type="textarea"
        />
      </div>
      <div class="configBtn">
        <button>预 览</button>
        <button @click="exportReport">下 载</button>
        <button>打 印</button>
      </div>
    </el-card>

    <el-card class="cardBox">
      <div class="headerTitle">
        <div>员工用能绩效分析报告</div>
        <div>
          <el-date-picker
            :disabled-date="disabledDate"
            v-model="pickerTime"
            end-placeholder="结束时间"
            range-separator="至"
            start-placeholder="开始时间"
            type="datetimerange"
          />
        </div>
      </div>
      <div class="inputs">
        <el-input v-model="staff" class="analysisScroll" type="textarea" />
      </div>
      <div class="configBtn">
        <button>预 览</button>
        <button @click="exportReport">下 载</button>
        <button>打 印</button>
      </div>
    </el-card>

    <el-card class="cardBox">
      <div class="headerTitle">
        <div>其他报告</div>
        <div>
          <el-date-picker
            :disabled-date="disabledDate"
            v-model="pickerTime"
            end-placeholder="结束时间"
            range-separator="至"
            start-placeholder="开始时间"
            type="datetimerange"
          />
        </div>
      </div>
      <div class="inputs">
        <el-input
          v-model="pickerTime"
          id="report1"
          class="analysisScroll"
          type="textarea"
        />
      </div>
      <div class="configBtn">
        <button>预 览</button>
        <button @click="exportReport">下 载</button>
        <button>打 印</button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { saveAs } from "file-saver";

let pickerTime = ref("当前不提供此服务");
let energyUse = ref("当前不提供此服务");
let operation = ref("当前不提供此服务");
let comfortable = ref("当前不提供此服务");
let staff = ref(
  "报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告报告"
);

const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
const exportReport = () => {
  console.log(1);
  let text = document.querySelector("#report1");
  var file = new File([`${text.value}`], "report.txt", {
    type: "text/plain;charset=utf-8",
  });
  saveAs(file);
};
</script>

<style lang="less" scoped>
.gridBox {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  row-gap: 5px;
  column-gap: 5px;
}

.cardBox {
  :deep(.el-date-editor) {
    width: 210px;
  }

  :deep(.el-card__body) {
    padding: 0;
  }

  .inputs {
    padding: 10px 20px 20px;

    :deep(.el-textarea) {
      border: 1px solid #eaf2fa;

      textarea {
        resize: none;
        height: 200px;
      }
    }
    :deep(.el-textarea__inner)::-webkit-scrollbar {
      width: 5px;
      height: 20px;
      background: #eee;
    }
    :deep(.el-textarea__inner)::-webkit-scrollbar-thumb {
      background: #4d62a5;
      border-radius: 5px;
    }
  }

  .configBtn {
    text-align: right;
    padding: 10px 20px 20px;

    button {
      width: 90px;
      padding: 4px 0;
      color: #fff;
      background: #8faadc;
      border: 1px solid #8faadc;
      border-radius: 4px;
      margin-left: 10px;
    }
  }
}
</style>
